<template>
  <div class="frame-animation">
    <img
      :src="frames[currentFrameIndex]"
      alt="Frame Animation"
      class="animated-image"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { images } from "./importImage";
const frames = images;
const currentFrameIndex = ref(0);
const frameInterval = ref(null);

const nextFrame = () => {
  currentFrameIndex.value = (currentFrameIndex.value + 1) % frames.length;
};

const startAnimation = () => {
  frameInterval.value = setInterval(nextFrame, 50); // 100毫秒切换一次帧
};

const stopAnimation = () => {
  if (frameInterval.value) {
    clearInterval(frameInterval.value);
  }
};

onMounted(async () => {
  startAnimation();
});

onUnmounted(() => {
  stopAnimation();
});
</script>

<style scoped>
.frame-animation {
  width: 800px; /* 根据你的图片尺寸调整 */
  height: 365px; /* 根据你的图片尺寸调整 */
  overflow: hidden;
  position: relative;
}

.animated-image {
  width: 100%;
  height: 100%;
}
</style>
